import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TextInput,
  PixelRatio,
  Image,
  ScrollView
} from 'react-native';
import ImageExport from '../../public/ImageExport';
import Dimensions from 'Dimensions';

export default class NvaWrap extends Component {
    constructor(props) {
        super(props)
        this.state = {
            navImgList: [{
                source: ImageExport.nva_1,
                isActive: true,
                key: '1'
            }, {
                source: ImageExport.nva_2,
                isActive: true,
                key: '2'
            }, {
                source: ImageExport.nva_3,
                isActive: true,
                key: '3'
            }, {
                source: ImageExport.nva_4,
                isActive: true,
                key: '4'
            }, {
                source: ImageExport.nva_5,
                isActive: true,
                key: '5'
            }, {
                source: ImageExport.nva_6,
                isActive: true,
                key: '6'
            }],
            currentPage: 1,
        }
        this.pageNum = 0;
	      this.screenWidth = Dimensions.get('window').width;
        this.maxLen = this.state.navImgList.length;
        this.startOffsetX = 0;
        this.ednOffsetX = 0;

    }
    componentWillMount () {

    }

    componentDidMount () {
	      this._runFocusImage();
    }

    componentWillReceiveProps (nextProps, nextState) {

    }

	  componentWillUnMount() {
		  if (this.timer) {
			  clearInterval(this.timer)
		  }
	  }

		_runFocusImage() {
			if (this.maxLen == 1) {
				return
			}
			let _this = this;
			if (this.timer) {
				clearInterval(this.timer)
			}
			this.timer = setInterval(() => {
				_this.scrollView.scrollTo({x: _this.pageNum * _this.screenWidth, animated: _this.pageNum !== 0})
				if (_this.pageNum + 1 == _this.maxLen) {
					_this.pageNum = 0;
				} else {
				    _this.pageNum++;
        }
			}, 1000)
		}

    _getnvaImg() {
        const {navImgList} = this.state;
        const {ScreenWidth} = this.props;
        return (
            <View style={[styles.flex1, styles.imgWrap]}>
                {navImgList.map((imgItem, imgIndex) => {
                    return (
                        <Image
                            source={imgItem.source}
                            resizeMethod="auto"
                            key={imgIndex + ''}
                            style={{width: this.screenWidth, height: 70}}
                        />
                    )
                }, this)}
            </View>
        )
    }

    render () {
        const {ScreenWidth} = this.props
        const {currentPage} = this.state
        return(
            <View style={[styles.nvaWrap]}>
                <ScrollView
                    showsHorizontalScrollIndicator
                    removeClippedSubviews
                    horizontal={true}
                    style={[styles.scrollWrap]}
                    directionalLockEnabled
                    ref={(ref) => this.scrollView = ref}
                    pagingEnabled = {true}
                    // onScroll={(event) => {
											// 	console.log('onScroll----------')
                    // }}
                    onTouchStart={() => {
                    	console.log('start')
	                    console.log(this.timer, 'timer')
	                    clearInterval(this.timer)
                    }}
                    onTouchMove={() => {
                    	console.log('move')
                    }}
                    onTouchEnd={() => {
                    	console.log('end')
	                    this._runFocusImage();
                    }}
                >
                    {this._getnvaImg()}
                </ScrollView>
            </View>
        )
    }
}

var styles = StyleSheet.create({
    nvaWrap: {
        height: 80,
        flexDirection: 'row',
        backgroundColor: '#fff',
        alignItems: 'flex-end',
    },
    flex1: {
        flex: 1,
    },
    imgWrap: {
        flexDirection: 'row',
    },
    scrollWrap: {
        flexDirection: 'row',
    }
})